import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        var equipment = ['内镜科', '口腔科', '肛肠科', '中西医科', '妇科', '呼吸道感染科'];
        var project = ['头颈外科', '其他科'];
        var colorList = ['#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac']
        const option = {
            backgroundColor: '#fff',
            tooltip: {
                formatter: function (param) {
                    if (param.data.type == null) {
                        return param.data.name + ":" + param.value;
                    } else {
                        return param.data.type + ":" + param.value;
                    }
                }
            },

            series: [{
                name: '整体分类',
                type: 'pie',
                radius: [0, '30%'],
                label: {
                    position: 'inner',

                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 2,
                        color: function (params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },

                selectedMode: 'single',
                data: [{
                    value: 40,
                    name: '内科综合',

                },
                {
                    value: 40,
                    name: '外科综合',

                },
                {
                    value: 20,
                    name: '超声科',

                },
                ]
            },
            {
                name: '招标方式',
                type: 'pie',
                radius: ['40%', '55%'],

                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: function (params) {
                            if (params.value != 0)
                                return params.data.type + ":" + params.value;
                            else
                                return '';
                        },
                        show: true,
                    },
                },

                data: [{
                    value: 135,
                    name: '传输',
                    type: equipment[0],

                },
                {
                    value: 200,
                    name: '传输',
                    type: equipment[1],

                },
                {
                    value: 100,
                    name: '传输',
                    type: equipment[2],

                },
                {
                    value: 50,
                    name: '传输',
                    type: equipment[3],

                },
                {
                    value: 300,
                    name: '传输',
                    type: equipment[4],

                },
                {
                    value: 90,
                    name: '传输',
                    type: equipment[5],

                },
                {
                    value: 310,
                    name: '话务',
                    type: project[0],

                },
                {
                    value: 234,
                    name: '话务',
                    type: project[1],

                },
                ]
            }
            ]
        };
        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '40vw', height: '400px', maxWidth: '40vw', maxHeight: '400px' }}></div>;
};

export default EChartsComponent;

